<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>东软环保公众监督平台</title>
		<script src="js/echarts.js"></script>
		<script src="js/china.js"></script>
		<script src="js/axios.js"></script>
		<link rel="stylesheet" href="framework/reset.css" />
		<link rel="stylesheet" href="framework/font-awesome/css/font-awesome.css" />
		<style>
			.right {
				color: #98d9ea;
				position: absolute;
				right: 20px;
				top: 20px;
				font-size: 20px;
			}

			h3 {
				text-align: center;
				font-size: 20px;
				color: #ffffff;
				margin-top: 20px;
			}

			ul {
				display: flex;
				justify-content: space-around;
				margin-top: 20px;
				color: #ffffff;
			}

			li {
				display: flex;
				align-items: center;
			}

			.myFa {
				font-size: 40px;
				color: #32ccee;
				margin-right: 10px;
			}

			h4 {
				font-size: 30px;
			}

			p {
				font-size: 20px;
				margin-top: 5px;
			}
		</style>
	</head>
	<body bgcolor="#001432">
		<div style="height: 100px;">
			<header>
				<img src="img/header.png" />
				<div class="right">
					<i class="fa fa-clock-o"></i>
					2024-04-22 09:14:50
				</div>
			</header>
		</div>
		<div style="display: flex;">
			<div style="flex:2;">
				<div style="display: flex; height: 260px;">
					<div style="height: 260px;width: 50%;">
						<h3>全国省会城市网格覆盖率(%)</h3>
						<div id="gaugeBox1" style="width: 100%; height: 260px;"></div>
					</div>
					<div style="height: 260px;width: 50%;">
						<h3>全国大城市网格覆盖率(%)</h3>
						<div id="gaugeBox2" style="width: 100%; height: 260px;"></div>
					</div>
				</div>
				<div style="height: 260px; margin-top:20px;">
					<div id="pieBox" style="width: 100%; height: 100%;"></div>
				</div>
				<div style="height: 260px;">
					<div id="lineBox" style="width: 100%; height: 100%;"></div>
				</div>
			</div>
			<div style="flex:3;">
				<div id="chinaDiv" style="height: 600px;width: 100%;"></div>
				<div style="height: 200px;">
					<div>
						<h3>空气质量检测实时统计</h3>
						<ul>
							<li>
								<i class="fa fa-user-o myFa"></i>
								<div>
									<h4 id="countAll">38</h4>
									<p>空气质量检测总数量</p>
								</div>
							</li>
							<li>
								<i class="fa fa-sun-o myFa"></i>
								<div>
									<h4 id="goodSum">2</h4>
									<p>空气质量良好数量</p>
								</div>
							</li>
							<li>
								<i class="fa fa-life-ring myFa"></i>
								<div>
									<h4 id="other">36</h4>
									<p>空气质量污染数量</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div style="flex:2;">
				<div style="height: 260px;width: 100%;">
					<div id="barBox1" style="width: 100%; height: 100%;"></div>
				</div>
				<div style="height: 260px;width: 100%;">
					<div id="barBox2" style="width: 100%; height: 100%;"></div>
				</div>
				<div style="height: 260px;width: 100%;">
					<div id="barBox3" style="width: 100%; height: 100%;"></div>
				</div>
			</div>
		</div>
	</body>
	<script>
		function gaugeBox() {
			let gaugeBox1 = echarts.init(document.getElementById("gaugeBox1"), "dark", {
				renderer: "canvas",
				useDirtyRect: false
			});
			let url = "http://localhost:8080/gridMember/gmForProvinceCenterCity";
			axios.get(url).then((r) => {

				gaugeBox1.setOption({
					backgroundColor: "#001432",
					series: [{
						type: "gauge",
						itemStyle: {
							color: "#67c23a"
						},
						progress: {
							show: true,
							width: 8,
						},
						axisLine: {
							lineStyle: {
								width: 8
							}
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							length: 0,
							lineStyle: {
								width: 0,
								color: "#999999",
							}
						},
						axisLabel: {
							distance: 3,
							color: "#fff",
							fontSize: 15
						},
						anchor: {
							show: true,
							showAbove: true,
							size: 10,
							itemStyle: {
								borderWidth: 10
							}
						},
						title: {
							show: false
						},
						detail: {
							valueAnimation: true,
							fontSize: 20,
							offsetCenter: [0, "90%"],
							color: "#67c23a"
						},
						data: [{
							value: r.data.data.result * 100,
							name: "百分比"
						}]
					}]
				});
			})
			let gaugeBox2 = echarts.init(document.getElementById("gaugeBox2"), "dark", {
				renderer: "canvas",
				useDirtyRect: false
			});
			gaugeBox2.setOption({
				backgroundColor: "#001432",
				series: [{
					type: "gauge",
					itemStyle: {
						color: "#f56c6c"
					},
					progress: {
						show: true,
						width: 8,
					},
					axisLine: {
						lineStyle: {
							width: 8
						}
					},
					axisTick: {
						show: false,
					},
					splitLine: {
						length: 0,
						lineStyle: {
							width: 0,
							color: "#999999",
						}
					},
					axisLabel: {
						distance: 3,
						color: "#fff",
						fontSize: 15
					},
					anchor: {
						show: true,
						showAbove: true,
						size: 10,
						itemStyle: {
							borderWidth: 10
						}
					},
					title: {
						show: false
					},
					detail: {
						valueAnimation: true,
						fontSize: 20,
						offsetCenter: [0, "90%"],
						color: "#f56c6c"
					},
					data: [{
						value: 50,
						name: "百分比"
					}]
				}]
			});
		}

		function pieBox() {
			let pieBox = echarts.init(document.getElementById("pieBox"), "dark", {
				renderer: "canvas",
				useDirtyRect: false
			});
			let url = "http://localhost:8080/statistic/aqiLevel";
			let aqiLevelsList = [];
			axios.get(url).then((r) => {
				if (r.data.ok) {
					r.data.data.aqiLevelVO.forEach((level, index) => {
						let singleAqiLevel = {
							name: '',
							value: ''
						};
						singleAqiLevel.name = level.aqiExplain;
						singleAqiLevel.value = level.aqiSum;
						aqiLevelsList.push(singleAqiLevel);
					});

					pieBox.setOption({
						backgroundColor: "#001432",
						title: {
							text: "空气质量指数级别分布",
							left: "center",
							textStyle: {
								fontSize: "20px"
							}
						},
						tooltip: {
							trigger: "item",
						},
						legend: {
							orient: "vertical",
							left: "left",
							top: "bottom"
						},
						series: [{
							name: "空气质量指数级别分布",
							type: "pie",
							radius: "50%",
							data: aqiLevelsList.map(level => ({
								name: level.name,
								value: level.value
							})),
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: "rgba(0,0,0,0.5)"
								}
							}
						}]
					});
				}
			});
		}

		function lineBox() {
			let lineBox = echarts.init(document.getElementById("lineBox"), "dark", {
				renderer: "canvas",
				useDirtyRect: false
			});
			let url = "http://localhost:8080/statistic/aqiAirQuality";
			axios.get(url).then((r) => {
				if (r.data.ok) {
					let overAirSumS = [];
					r.data.data.aqiAirQuality.forEach((air, index) => {
						const singleAirLevel = {
							name: '',
							value: ''
						};
						singleAirLevel.name = air.month;
						singleAirLevel.value = air.aqiSum;
						overAirSumS.push(singleAirLevel);

					});
					lineBox.setOption({
						backgroundColor: "#001432",
						title: {
							text: "12个月内空气质量超标趋势",
							textStyle: {
								fontSize: "20px"
							},
							left: "center",
							top: "20px"
						},
						xAxis: {
							type: "category",
							data: overAirSumS.map(item => item.name)
						},
						yAxis: {
							type: "value"
						},
						series: [{
							data: overAirSumS.map(item => item.value),
							type: "line",
							smooth: true
						}]
					});
				}
			})
		}

		function barBox() {
			let barBox1 = echarts.init(document.getElementById("barBox1"), "dark", {
				renderer: "canvas",
				useDirtyRect: false
			});
			let barBox2 = echarts.init(document.getElementById("barBox2"), "dark", {
				renderer: "canvas",
				useDirtyRect: false
			});
			let barBox3 = echarts.init(document.getElementById("barBox3"), "dark", {
				renderer: "canvas",
				useDirtyRect: false
			});
			let url = "http://localhost:8080/statistic/provinceGroup";
			axios.get(url).then((r) => {
				let aqiSO2Bar = [];
				let aqiCOBar = [];
				let aqiPMBar = [];
				r.data.data.provinceVO.forEach((level, index) => {
					const SO2AqiLevel = {
						name: '',
						value: ''
					};
					SO2AqiLevel.name = level.provinceAbbr;
					SO2AqiLevel.value = level.so2ExceedSum;
					aqiSO2Bar.push(SO2AqiLevel);
					barBox1.setOption({
						backgroundColor: "#001432",
						title: {
							text: "悬浮颗粒物(PM2.5)浓度超标累计",
							textStyle: {
								fontSize: "20px"
							},
							left: "center",
							top: "20px"
						},
						xAxis: {
							type: "category",
							data: aqiSO2Bar.map(item => item.name)
						},
						yAxis: {
							type: "value"
						},
						series: [{
							data: aqiSO2Bar.map(item => item.value),
							type: "bar",
							itemStyle: {
								color: "#409eff"
							},
							barCategoryGap: "50%"
						}]
					});
					const COAqiLevel = {
						name: '',
						value: ''
					};
					COAqiLevel.name = level.provinceAbbr;
					COAqiLevel.value = level.so2ExceedSum;
					aqiCOBar.push(COAqiLevel);
					barBox2.setOption({
						backgroundColor: "#001432",
						title: {
							text: "二氧化硫(SO2)浓度超标累计",
							textStyle: {
								fontSize: "20px"
							},
							left: "center",
							top: "20px"
						},
						xAxis: {
							type: "category",
							data: aqiCOBar.map(item => item.name)
						},
						yAxis: {
							type: "value"
						},
						series: [{
							data: aqiCOBar.map(item => item.value),
							type: "bar",
							itemStyle: {
								color: "#67c23a"
							},
							barCategoryGap: "50%"
						}]
					});
					const PMAqiLevel = {
						name: '',
						value: ''
					};
					PMAqiLevel.name = level.provinceAbbr;
					PMAqiLevel.value = level.so2ExceedSum;
					aqiPMBar.push(PMAqiLevel);
					barBox3.setOption({
						backgroundColor: "#001432",
						title: {
							text: "一氧化碳(CO)浓度超标累计",
							textStyle: {
								fontSize: "20px"
							},
							left: "center",
							top: "20px"
						},
						xAxis: {
							type: "category",
							data: aqiPMBar.map(item => item.name)
						},
						yAxis: {
							type: "value"
						},
						series: [{
							data: aqiPMBar.map(item => item.value),
							type: "bar",
							itemStyle: {
								color: "#f56c6c"
							},
							barCategoryGap: "50%"
						}]
					});
				});
			});
		}

		function chinaMap() {
			let chinaMap = echarts.init(document.getElementById("chinaDiv"));
			let url = "http://localhost:8080/statistic/chinaMap";
			let chinaMapArr = [];
			axios.get(url).then((r) => {
				r.data.data.chinaMap.forEach((level, index) => {
					const chinaMaps = {
						name: '',
						value: ''
					};
					chinaMaps.name = level.provinceName;
					chinaMaps.value = level.sum;
					chinaMapArr.push(chinaMaps);
				})
				chinaMap.setOption({
					backgroundColor: "#001432",
					series: {
						type: "map",
						mapType: "china",
						label: {
							normal: {
								show: true,
								color: "#2b52ff"
							},
							emphasis: {
								show: true,
								color: "red"
							}
						},
						data: chinaMapArr,
						name: "累计超标"
					},
					visualMap: {
						left: "200px",
						bottom: "50px",
						splitList: [{
								start: 400,
								end: 500
							},
							{
								start: 300,
								end: 400
							},
							{
								start: 200,
								end: 300
							},
							{
								start: 100,
								end: 200
							},
							{
								start: 0,
								end: 100
							}
						],
						color: ["#660606", "#ff0000", "#ffaa00", "#ffee31", "#9dff5c"],
						show: true
					},
					tooltip: {
						trigger: "item"
					}
				});
			});
		}

		function statistic() {
			let url = "http://localhost:8080/statistic/other";
			axios.get(url).then((r) => {
				if (r.data.ok) {
					let other = r.data.data.other;
					document.getElementById("countAll").innerHTML = other.sum;
					document.getElementById("goodSum").innerHTML = other.goodSum;
					document.getElementById("other").innerHTML = parseInt(other.sum) - parseInt(other.goodSum);
				}
			})
		}

		chinaMap();
		gaugeBox();
		lineBox();
		barBox();
		pieBox();
		statistic();
	</script>
</html>